<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, mininum-scale=1.0, user-scalable=0">
    <title>苏宁</title>
    <link rel="stylesheet" href="./css/苏宁.css">
    <link rel="stylesheet" href="./layui/css/layui.css">
</head>

<body>
    <!-- header -->
    <div class="sn-wrapper" id="toper">
        <div class="index-nav">
            <img src="./img/1.jpg" alt="">
        </div>
        <div class="nav">
            <div class="nav-t">
                <div class="wrapper-l"><img src="./img/分类.png" alt=""></div>
                <div class="wrapper-m"><img src="./img/服务.png" alt=""></div>
                <div class="wrapper-r"><img src="./img/登录.png" alt=""></div>
            </div>
            <div class="nav-b">
                <div class="search">
                    <div class="sear"><i class="iconf"></i><input type="text" placeholder="商品/店铺"></div>
                </div>
            </div>
        </div>
    </div>
    <!-- 轮播栏 -->
    <div class="banner">
        <div class="swipe-wrapper"><img src="./img/轮播背景.jpg" alt="">
            <img src="./img/lbt.png" alt="" class="lb-top">
            <div class="layui-carousel" id="test1">
                <div carousel-item>
                    <div><img src="./img/lb1.jpg" alt=""></div>
                    <div><img src="./img/lb2.jpg" alt=""></div>
                    <div><img src="./img/lb3.jpg" alt=""></div>
                    <div><img src="./img/lb4.jpg" alt=""></div>
                    <div><img src="./img/lb5.jpg" alt=""></div>
                    <div><img src="./img/lb6.jpg" alt=""></div>
                    <div><img src="./img/lb8.jpg" alt=""></div>
                </div>
            </div>
        </div>
    </div>
    <!-- 预售栏 -->
    <div class="hot-view"><img src="./img/hot-view.gif" alt=""></div>
    <!-- 频道栏 -->
    <div class="enter-list">
        <div class="enter-wrapper">
            <ul class="fix">
                <li><a href="#"><img src="./img/v1.png" alt="">
                        <div>苏宁秒杀</div>
                    </a>
                    <a href="#"><img src="./img/v2.png" alt="">
                        <div>苏宁超市</div>
                    </a>
                    <a href="#"><img src="./img/v3.png" alt="">
                        <div>苏宁拼购</div>
                    </a>
                    <a href="#"><img src="./img/v4.png" alt="">
                        <div>手机数码</div>
                    </a>
                    <a href="#"><img src="./img/v5.png" alt="">
                        <div>苏宁家电</div>
                    </a>
                    <a href="#"><img src="./img/v6.png" alt="">
                        <div>免费水果</div>
                    </a>
                    <a href="#"><img src="./img/v7.png" alt="">
                        <div>super会员</div>
                    </a>
                    <a href="#"><img src="./img/v8.png" alt="">
                        <div>签到有礼</div>
                    </a>
                    <a href="#"><img src="./img/v9.png" alt="">
                        <div>领券中心</div>
                    </a>
                    <a href="#"><img src="./img/v10.png" alt="">
                        <div>更多频道</div>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <!-- 秒杀栏 -->
    <div class="hor">
        <div class="hor-view">
            <div class="hor1">
                <div class="hogp">
                    <h6>限时秒杀</h6>
                    <p>人气好货限时抢</p>
                    <ul>
                        <li class="le"><img src="./img/le.jpg" alt="">
                            <p>¥12.8</p>
                        </li>
                        <li class="re"><img src="./img/re.jpg" alt="">
                            <p>¥22.9</p>
                        </li>
                    </ul>
                </div>
                <div class="hogp2"></div>
                <div class="hogp">
                    <h6>限时秒杀</h6>
                    <p>人气好货限时抢</p>
                    <ul>
                        <li class="le"><img src="./img/le.jpg" alt="">
                            <p>¥12.8</p>
                        </li>
                        <li class="re"><img src="./img/re.jpg" alt="">
                            <p>¥22.9</p>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="hor2">
                <div class="hogp">
                    <h6>限时秒杀</h6>
                    <p>人气好货限时抢</p>
                    <ul>
                        <li class="le"><img src="./img/le.jpg" alt="">
                            <p>¥12.8</p>
                        </li>
                        <li class="re"><img src="./img/re.jpg" alt="">
                            <p>¥22.9</p>
                        </li>
                    </ul>
                </div>
                <div class="hogp2"></div>
                <div class="hogp">
                    <h6>限时秒杀</h6>
                    <p>人气好货限时抢</p>
                    <ul>
                        <li class="le"><img src="./img/le.jpg" alt="">
                            <p>¥12.8</p>
                        </li>
                        <li class="re"><img src="./img/re.jpg" alt="">
                            <p>¥22.9</p>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="hor3"></div>
            <div class="hor4">
                <div class="le-title">
                    <p class="clamp1">为您推荐</p>
                    <p class="clamp2">精选频道</p>
                </div>
                <div class="four-item"><img src="./img/pro1.webp" alt="">
                    <p>苏宁国际</p>
                </div>
                <div class="four-item"><img src="./img/pro2.png" alt="">
                    <p>苏宁Outle
                    </p>
                </div>
                <div class="four-item"><img src="./img/pro3.png" alt="">
                    <p>会员抢购</p>
                </div>
                <div class="four-item"><img src="./img/pro4.png" alt="">
                    <p>Super会员</p>
                </div>
            </div>
        </div>
    </div>
    <!-- 推荐栏-->
    <div class="new-bd">
        <div class="tj"><img src="./img/tj.png" alt=""></div>
        <div class="new-list">
            <div class="bd"><img src="./img/n2.webp" alt="" id="bpic"><img src="./img/n1.png" alt="" id="dpic">
                <p class="th1"><span>人气榜</span></p>
                <p class="th2">时尚保鲜冰箱榜
                </p>
                <p class="th3">卖爆1.6万件</p>
            </div>
            <div class="bd"><img src="./img/n4.webp" alt="" id="bpic"><img src="./img/n3.png" alt="" id="dpic">
                <p class="th1"><span>人气榜</span></p>
                <p class="th2">汽车养护用品榜
                </p>
                <p class="th3">卖爆1978件</p>
            </div>
            <div class="bd"><img src="./img/n5.webp" alt="" id="bpic"><img src="./img/n1.png" alt="" id="dpic">
                <p class="th1"><span>人气榜</span></p>
                <p class="th2">健康食用油榜</p>
                <p class="th3">卖爆2701件</p>
            </div>
        </div>
    </div>
    <div class="bd">
        <div class="bd-two">
            <div class="two-hang">
                <div class="hg1">
                    <div><span class="zt">诱惑迷人唇膏榜</span><span class="ft">人气榜</span></div>
                    <p>卖爆1142件</p>
                    <div><img src="./img/opal.webp" alt=""><img src="./img/opa2.webp" alt=""></div>
                </div>
                <div class="hg2"></div>
                <div class="hg1">
                    <div><span class="zt">汽车养护用品榜
                        </span><span class="ft">人气榜</span></div>
                    <p>卖爆1942件</p>
                    <div><img src="./img/opal.webp" alt=""><img src="./img/opa2.webp" alt=""></div>
                </div>
            </div>
            <div class="two-h"></div>
            <div class="two-hang">
                <div class="hg1">
                    <div><span class="zt">型男魅力剃须刀榜
                        </span><span class="ft">人气榜</span></div>
                    <p>卖爆2142件</p>
                    <div><img src="./img/opal.webp" alt=""><img src="./img/opa2.webp" alt=""></div>
                </div>
                <div class="hg2"></div>
                <div class="hg1">
                    <div><span class="zt">保湿护肤面霜榜
                        </span><span class="ft">人气榜</span></div>
                    <p>卖爆1182件</p>
                    <div><img src="./img/opal.webp" alt=""><img src="./img/opa2.webp" alt=""></div>
                </div>
            </div>
        </div>
    </div>
    <!-- 商品详情 -->
    <div class="guessu">
        <div class="bk"></div>
        <div class="guessLiK">
            <div class="gul"><img src="./img/157793128909842388.webp" alt=""></div>
            <div class="prolist">
                <div class="kw-w">
                    <div class="pro-w"><img src="./img/ybfvPJrG1S1649667469789.webp" alt=""></div>
                    <p class="pro-ti">魅可MAC旅行专用:五色迷你唇膏(亮色)</p>
                    <p class="ctag"><img src="./img/160456527170671638.png" alt=""></p>
                    <div class="pro-pr">
                        <span>¥</span>
                        <span>289</span>
                        <span>5评论</span>
                    </div>
                </div>
                <div class="kw-w">
                    <div class="pro-w"><img src="./img/ybfvPJrG1S1649667469789.webp" alt=""></div>
                    <p class="pro-ti">魅可MAC旅行专用:五色迷你唇膏(亮色)</p>
                    <p class="ctag"><img src="./img/160456527170671638.png" alt=""></p>
                    <div class="pro-pr">
                        <span>¥</span>
                        <span>289</span>
                        <span>5评论</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 底部 -->
    <div class="hor-viewer">
        <div class="vw1"><img src="./img/vw1.png" alt=""><span class="vwer">首页</span></div>
        <div class="vw1"><img src="./img/vw2.png" alt=""><span>分类</span></div>
        <div class="vw1"><img src="./img/vw3.png" alt=""><span>排行榜</span></div>
        <div class="vw1"><img src="./img/vw4.png" alt=""><span>购物车</span></div>
        <div class="vw1"><img src="./img/vw5.png" alt=""><span>我的易购</span></div>
    </div>
    <div class="djtop"><a href="#toper"><img src="./img/top.png" alt=""></a></div>

    <script>
        (function (doc, win) {
            var docEl = doc.documentElement,
                resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                recalc = function () {
                    // 宽度     
                    var clientWidth = docEl.clientWidth;
                    if (!clientWidth) return;
                    // 
                    if (clientWidth >= 750) {
                        docEl.style.fontSize = '100px';
                    } else {
                        // 动态设置html的font-size
                        docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
                    }
                };
            if (!doc.addEventListener) return;
            win.addEventListener(resizeEvt, recalc, false);
            doc.addEventListener('DOMContentLoaded', recalc, false);
        })(document, window);
    </script>
    <script src="./layui/layui.js"></script>
    <script>
        layui.use('carousel', function () {
            var carousel = layui.carousel;
            //建造实例
            carousel.render({
                elem: '#test1',
                width: '7.02rem' //设置容器宽度
                ,
                height: '2.3rem',
                arrow: 'none' //始终显示箭头
                //,anim: 'updown' //切换动画方式
            });
        });
    </script>
</body>

</html>